<template>
    <div class="bg">
        <Header :nowDate="nowDate" />
        <Left/>
        <Middle/>
        <Right/>
    </div>
</template>

<script>
import Header from "../../components/dp4/header";
import Left from "../../components/dp4/left.vue";
import Middle from "../../components/dp4/middle.vue";
import Right from "../../components/dp4/right.vue";
import { getNowDate,delay } from "../../utils";
import { getWeather } from "../../config/api";

export default {
    components: {
        Left,
        Middle,
        Right,
        Header
    },
    data() {
        return {
            nowDate: {
                date: "",
                hours: "",
                minutes: "",
                seconds: "",
                weekDay: ""
            },
        };
    },
      mounted() {
        this.nowTimes();
        this.timer = delay.setInterval(this.nowTimes, 1000);

        this.timer = setInterval(this.nowTimes, 1000);
        getWeather();
    },
    destroyed(){
        this.timer && delay.clearInterval(this.timer);

    },
    methods: {
        /**
         * 实时获取年月日时分秒定时器
         */
        nowTimes() {
            this.nowDate = getNowDate();
        }
    }
};
</script>

<style lang="scss" scoped>
.bg {
    width: 3072px;
    height: 896px;
    background: url("../../assets/dp4/dp4-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    color: #fff;
    img {
        display: block;
    }
}

</style>